<template>
    <div id="app">
      <div class="">
        <table class="table caption-top table-hover">
          <caption class="text-center">
            <h1>用户信息</h1>
            <el-button type="primary" round @click="getUsers">刷新</el-button>
            <el-button type="warning" round @click="dialogVisible = true">添加用户</el-button>
            &nbsp;
            <el-input type="text" placeholder="请输入名称" class="w-25" v-model="user.name"/>
            &nbsp;<el-button type="success"  icon="el-icon-search" round @click="getUserList">搜索</el-button>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
              <div>
                <h3>添加用户信息</h3>
              </div>
              <span>学号：</span><input class="h-30" v-model="addusers.studentNumber"> <br>
              <span>姓名：</span><input class="h-30" v-model="addusers.name"><br>
              <span>职位：</span><input class="h-30" v-model="addusers.posts"><br>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="adduserss">添加</el-button>
              </span>
  
            </el-dialog>
          </caption>
          <thead>
            <tr>
              <th scope="col">学号</th>
              <th scope="col">姓名</th>
              <th scope="col">职位</th>
              <th scope="col" class="text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <UserInfo v-for="user in users_for_page" :key="user.usersId" :users="user">
            </UserInfo>
          </tbody>
        </table>

        <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[4, 5, 6]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="users.length">
        </el-pagination>
    </div>
  
      </div>
    </div>
  </template>
    
  <script>
  import UserInfo from './UserInfo.vue'
  import axios from 'axios'
  export default {
    name: 'userInfo',
    components: {
        UserInfo
    },
    data() {
      return {
        searchName: "",
        page: 1,
        page_size:5,
        users: [],
        user: {
            studentNumber: '',
            name: '',
            password: '',
            id: '',
            posts: '',
            description: '',
            className: '',
        },
        addusers: {
          studentNumber: "",
          name: "",
          posts: ""
        },

        dialogVisible: false,
      }
    },
    methods: {
        handleSizeChange(val) {
          this.page_size = val;
          this.users.slice(this.page * this.page_size - page_size, this.page * page_size);
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.page = val;
          this.users.slice(this.page * val - val, this.page * val);
          console.log(`当前页: ${val}`);
        },
      getUsers() {
        axios({
          url: "http://localhost:8080/user/all",
          method: 'Get'
        }).then(res => {
          console.log(res.data);
          this.users = res.data;
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      adduserss() {
        axios({
          url: "http://localhost:8080/user/add",
          method: 'Post',
          data: this.addusers
        }).then(() => {
          this.dialogVisible = false;
          location.reload();
        })
  
      },
      getUserList() {
        axios({
          url: "http://localhost:8080/user/searchName",
          method: "Post",
          data: this.user
        }).then(res => {
          this.page = 1;
          this.users = res.data;
        })
      }
    },
    created() {
      this.getUsers();
    },
    computed: {
      users_for_page() {
        return this.users.slice(this.page * this.page_size - this.page_size, this.page * this.page_size);
      }
    }
  }
  </script>
    
  <style scoped>
  .h-30 {
    height: 35px;
    margin-bottom: 10px;
  }
  
  .h-10 {
    height: 10px;
  }
  </style>
    